<template>
    <div class="sumBox">
        <div class="left">
            <ul>
                <li class="menuli" v-for="(item, index) in Menulist" :key="index" @click="scrollToContent(index)"
                    :class="{ active: activeIndex === index }">
                    {{ item.name }}
                </li>
            </ul>
        </div>
        <div class="right" ref="rightContent" @scroll="onScroll">
            <div class="content" :style="{ top: index * 100 + 'px' }" v-for="(item, index) in contentlist" :key="index"
                :id="'content-' + index">
                <div class="title">{{ item.name }}</div>
                <div class="value">{{ item.value }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

let isScrolling = false; // 标志变量来控制滚动事件



const Menulist = ref([
    { name: '标题1' },
    { name: '标题2' },
    { name: '标题3' },
    { name: '标题4' },
    { name: '标题5' },
    { name: '标题6' },
    { name: '标题7' },
    { name: '标题8' },
    { name: '标题9' },
    { name: '标题10' },
    { name: '标题11' },
    { name: '标题12' },
]);

const contentlist = ref([
    { name: '标题1', value: '111...' },
    { name: '标题2', value: '222...' },
    { name: '标题3', value: '333...' },
    { name: '标题4', value: '444...' },
    { name: '标题5', value: '555...' },
    { name: '标题6', value: '666...' },
    { name: '标题7', value: '777...' },
    { name: '标题8', value: '888...' },
    { name: '标题9', value: '999...' },
    { name: '标题10', value: '101010...' },
    { name: '标题11', value: '111111...' },
    { name: '标题12', value: '121212...' },
]);

const activeIndex = ref(null);
const rightContent = ref(null);


const scrollToContent = (index) => {
    // 临时禁用滚动事件处理
    isScrolling = true;


    const element = document.getElementById('content-' + index);
    if (element) {
        const top = parseInt(element.style.top.replace('px', ''), 10);
        if (rightContent.value) {
            rightContent.value.scrollTo({
                top: top,
                behavior: 'smooth'
            })
        }
        activeIndex.value = index;
    }

    // 恢复滚动事件处理
    setTimeout(() => {
        isScrolling = false;
    }, 1000); // 延迟确保滚动事件处理完成

};

const onScroll = () => {
    if (isScrolling) return; // 如果正在滚动，则跳过事件处理

    const contentElements = rightContent.value.children;
    const scrollTop = rightContent.value.scrollTop;

    for (let i = 0; i < contentElements.length; i++) {
        const element = contentElements[i];
        const rect = element.getBoundingClientRect();
        const offsetTop = rect.top + rightContent.value.scrollTop;

        if (scrollTop >= offsetTop - 50 && scrollTop < offsetTop + element.clientHeight) {
            if (activeIndex.value !== i) {
                activeIndex.value = i;
            }
            break;
        }
    }
};

</script>

<style lang="scss" scoped>
.sumBox {
    display: flex;
    width: 100%;
    height: 90vh;
}

.left {
    width: 20%;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid #ccc;
}

.right {
    width: 80%;
    height: 100%;
    overflow-y: auto;
    padding: 10px;
    position: relative;
}

.menuli {
    margin: 10px 0;
    cursor: pointer;
    transition: background-color 0.3s;
}

.menuli.active {
    background-color: #ddd;
}

.menuli:hover {
    background-color: #eee;
}

.content {
    position: absolute;
}

.title {
    font-weight: bold;
    margin-bottom: 10px;
}
</style>
